<template>
<div class="header">
    <span>我的订单</span>
  </div>

<div class="empty" v-if="myOrderShow==0">
  <div class="iconfont">&#xe602;</div>
  <p>您还没有提交订单</p>
</div>

<div class="main" v-if="myOrderShow!=0">
   <ul class="main_ul">
     <li class="main_li" v-for="(item,index) in myOrderList" :key="item.shopName">
       <div class="main_li_left">
         <p class="shopname">{{item.shopName}}</p>
         <img v-for="items in item.imgList" :key="items" :src="items" />
       </div>
       <div class="main_li_right">
         <p class="type">{{item.type}}</p>
         <p class="price">¥{{item.priceSum}}</p>
         <p class="sum">共{{item.sum}}件</p>
       </div>

       <div class="main_li_button">
       <button class="main_li_express" v-show="item.type=='交易成功'">查看物流</button>
       <button class="main_li_remove" v-show="item.type=='订单已取消'" @click="removeMyOrder(index)">删除</button>
       </div>
     </li>
   </ul>
</div>

  <Tabber show=2></Tabber>
</template>

<script>
import Tabber from '../../components/tabber/tabber.vue'
import store from '@/store'
import { ref } from '@vue/reactivity'

const myOrderList = ref(store.state.myOrderList)
export default {
  name: 'MyOrder',
  components: {
    Tabber
  },
  setup () {
    const myOrderShow = myOrderList.value.length

    const removeMyOrder = index => {
      store.commit('removeMyOrder', index)
      store.commit('setStorage')
    }
    return { myOrderShow, myOrderList, removeMyOrder }
  }

}
</script>

<style lang='scss' scoped>
.header{
    text-align: center;
    font-size: .16rem;
    padding: .08rem 0 .11rem ;
    background-color: #ffffff;
}
.main{
    overflow-y: auto;
    position: absolute;
    top: .3739rem;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    padding: .16rem .18rem .49rem;
}
.empty{
  width: 3rem;
  height: 2rem;
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  z-index: 2;
  text-align: center;
  font-size: .16rem;
  .iconfont{
    font-size: .5rem;
  }
}
.main_li{
  padding: .16rem .16rem .42rem;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  border-right: .04rem;
  margin-bottom: .16rem;
  position: relative;
  p{
    margin: 0;
  }
  &_left{
  .shopname{
    font-size: .16rem;
    font-weight: bold;
    margin-bottom: .16rem;
  }
  img{
    width: .4rem;
    height: .4rem;
    margin-right: .12rem;
  }
}
&_right{
  font-size: .14rem;
  .type{
    color: #999999;
    margin-bottom: .16rem;
  }
  .price{
    color: #e93b3b;
    margin-bottom: .08rem;
  }
  .sum{
    font-size: .12rem;
  }
}
&_button{
  position: absolute;
  bottom: .1rem;
  right: .16rem;
}
&_express,&_remove{
  width: .65rem;
  height: .25rem;
  border: none;
  background-color: #f1efef;
  border-radius: .04rem;
}
}

</style>
